import { Directive, ElementRef, HostListener, Output, EventEmitter, Input } from '@angular/core';
import { pipe, of, fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, tap, map } from 'rxjs/operators';

@Directive({
    selector: '[appHotSearch]'
})
export class HotSearchDirective {
    @Output() hotSearchEmit = new EventEmitter();
    constructor(
        private el: ElementRef
    ) {
        const searchBox = el.nativeElement;
        const typeahead = fromEvent(searchBox, 'input').pipe(
            map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
            debounceTime(500),
            distinctUntilChanged(),
        );
        typeahead.subscribe((data)=>{
            this.hotSearchEmit.emit()
        })
    }
}
